@import '../abstracts/variables';

$default-background: var(--mud-palette-action-default-hover);
$default-foreground: var(--mud-palette-text-primary);

.mud-chat {
  display: grid;
  column-gap: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-radius: var(--mud-default-borderradius);

  &.mud-dense {
    .mud-chat-bubble {
      padding: 0.1875rem 1rem;
      min-height: calc(2.75rem * 1 / 3);

      & + .mud-chat-bubble {
        margin-top: 0.1875rem;
      }
    }

    .mud-chat-header {
      line-height: calc(1.25rem * 1 / 3);
    }
  }

  &.mud-square {
    border-radius: 0px;

    .mud-chat-bubble {
      border-radius: 0px;
    }
  }

  &.mud-chat-arrow-top {
    .mud-chat-bubble:before {
      content: "";
      mask-image: url();
      bottom: auto;
      top: 0;
    }

    &.mud-chat-start,
    &.mud-chat-end.mud-chat-rtl {
      .mud-chat-bubble:before {
        transform: none;
      }
    }

    &.mud-chat-end,
    &.mud-chat-start.mud-chat-rtl {
      .mud-chat-bubble:before {
        transform: scaleX(-1);
      }
    }

    &.mud-chat-start, &.mud-chat-end.mud-chat-rtl {
      .mud-chat-bubble {
        border-top-left-radius: 0;
      }
    }

    &.mud-chat-end, &.mud-chat-start.mud-chat-rtl {
      .mud-chat-bubble {
        border-top-right-radius: 0;
      }
    }
  }

  &.mud-chat-arrow-bottom {
    .mud-chat-bubble:before {
      content: "";
      mask-image: url();
      bottom: 0;
    }

    &.mud-chat-start,
    &.mud-chat-end.mud-chat-rtl {
      .mud-chat-bubble:before {
        transform: none;
      }
    }

    &.mud-chat-end,
    &.mud-chat-start.mud-chat-rtl {
      .mud-chat-bubble:before {
        transform: scaleX(-1);
      }
    }

    &.mud-chat-start, &.mud-chat-end.mud-chat-rtl {
      .mud-chat-bubble {
        border-bottom-left-radius: 0;
      }
    }

    &.mud-chat-end, &.mud-chat-start.mud-chat-rtl {
      .mud-chat-bubble {
        border-bottom-right-radius: 0;
      }
    }
  }

  &.mud-chat-arrow-middle {
    .mud-chat-bubble:before {
      content: "";
      mask-image: url();
      top: 50%;
    }

    &.mud-chat-start,
    &.mud-chat-end.mud-chat-rtl {
      .mud-chat-bubble:before {
        transform: translateY(-50%);
      }
    }

    &.mud-chat-end,
    &.mud-chat-start.mud-chat-rtl {
      .mud-chat-bubble:before {
        transform: scaleX(-1) translateY(-50%);
      }
    }
  }

  &-bubble {
    position: relative;
    text-align: start;
    align-content: center;
    width: fit-content;
    padding: 0.5rem 1rem;
    max-width: 90%;
    border-radius: var(--mud-default-borderradius);
    min-width: 2.75rem;
    min-height: 2.75rem;

    &.mud-chat-bubble-clickable {
      cursor: pointer;
      user-select: none;
      -webkit-appearance: none;
      -webkit-tap-highlight-color: transparent;
      transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
      --mud-ripple-color: $default-foreground;
      --mud-ripple-opacity: var(--mud-ripple-opacity-secondary) !important;

      @media(hover: hover) and (pointer: fine) {
        &:hover {
          box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0,0,0,.12);
          background-color: var(--mud-palette-action-disabled-background);
        }
      }

      &:focus-visible {
        box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0,0,0,.12);
        background-color: var(--mud-palette-action-disabled-background);
      }

      &:active {
        box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0,0,0,.12);
        background-color: var(--mud-palette-action-disabled-background);
      }
    }

    &:before {
      position: absolute;
      width: 0.75rem;
      height: 0.75rem;
      background-color: inherit;
      mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: center;
    }

    & + .mud-chat-bubble {
      margin-top: 0.5rem;
    }

    & + .mud-chat-bubble:before {
      content: none !important;
    }
  }

  &-header {
    grid-row-start: 1;
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    min-height: 0.5rem;

    time {
      margin-left: 0.5rem;
      opacity: 0.5;
      font-size: 0.75rem;
      line-height: 1rem;
    }
  }

  &-footer {
    opacity: 0.5;
    font-size: 0.875rem;
    line-height: 1rem;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    min-height: 0.5rem;
  }

  .mud-avatar {
    align-self: center;
    grid-row-start: 1;
  }

  &:has(.mud-chat-header) .mud-avatar {
    grid-row-start: 2;
  }

  &-start {
    place-items: start;
    grid-template-columns: 1fr 99fr;

    .mud-chat-header,
    .mud-chat-footer {
      grid-column-start: 2;
    }

    .mud-avatar {
      grid-column-start: 1;
      margin-left: 0.25rem;
      margin-right: -0.35rem;
    }

    .mud-chat-bubble {
      grid-column-start: 2;

      &:before {
        inset-inline-start: -0.749rem;
      }
    }
  }

  &-end {
    place-items: end;
    grid-template-columns: 99fr 1fr;

    .mud-chat-header,
    .mud-chat-footer {
      grid-column-start: 1;
    }

    .mud-avatar {
      grid-column-start: 2;
      margin-right: 0.25rem;
      margin-left: -0.35rem;
    }

    .mud-chat-bubble {
      grid-column-start: 1;
      text-align: end;

      &:before {
        inset-inline-start: 100%;
        transform: scaleX(-1);
      }
    }
  }
}

  .mud-chat-text {
    &-default {
      color: $default-foreground;
      background-color: $default-background;
      --mud-ripple-color: $default-foreground;
    }

    @each $color in $mud-palette-colors {
      &-#{$color} {
        color: var(--mud-palette-#{$color}-darken);
        background-color: var(--mud-palette-#{$color}-hover);
        --mud-ripple-color: var(--mud-palette-#{$color}-darken);
      }
    }
  }

  .mud-chat-outlined {
    &-default {
      color: $default-foreground;
      border: 1px solid $default-background;
      --mud-ripple-color: $default-foreground;

      &:before {
        background-color: $default-background;
      }

      &.mud-chat-arrow-top {
        &:before {
          top: -0.05rem !important;
        }
      }

      &.mud-chat-arrow-bottom {
        &:before {
          bottom: -0.07rem !important;
        }
      }
    }

    @each $color in $mud-palette-colors {
      &-#{$color} {
        color: var(--mud-palette-#{$color}-darken);
        border: 1px solid var(--mud-palette-#{$color});
        --mud-ripple-color: var(--mud-palette-#{$color}-darken);

        &:before {
          background-color: var(--mud-palette-#{$color}-darken);
        }

        &.mud-chat-arrow-top {
          &:before {
            top: -0.05rem !important;
          }
        }

        &.mud-chat-arrow-bottom {
          &:before {
            bottom: -0.02rem !important;
          }
        }
      }
    }
  }

  .mud-chat-filled {
    &-default {
      color: $default-foreground;
      font-weight: 500;
      background-color: $default-background;
      --mud-ripple-color: $default-foreground;
    }

    @each $color in $mud-palette-colors {
      &-#{$color} {
        color: var(--mud-palette-#{$color}-text);
        font-weight: 500;
        background-color: var(--mud-palette-#{$color});
        --mud-ripple-color: var(--mud-palette-#{$color}-text);
      }
    }
  }
